.material-detail{
  min-height: 100vh;
  background-color: #000;
  .article-resource{
    position: relative;
    .resource-nums{
      position: absolute;
      top: 160rpx;
      right: 30rpx;
      z-index: 2;
      background: rgba(0,0,0,0.5);
      color: white;
      font-size: 22rpx;
      height: 30rpx;
      padding: 0 10rpx;
      line-height: 30rpx;
      border-radius: 15rpx;
    }
  }
  .material-detail-title{
    color: white;
    height: 100%;
    box-sizing: border-box;
    @include flex;
    @include center;
    @include text-ellipsis-line(1);
    width: 100%;
    height: 100%;
    line-height: 200%;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 0 160rpx;
    box-sizing: border-box;
  }
  .resource-list{
    // min-height: 400rpx;
    height: calc(100vh - 158rpx);
    position: relative;
    
    .resource-item{
      display: inline-block;
      vertical-align: middle;
      .img-box{
        height: calc(100vh - 158rpx);
        @include flex(column);
        @include center;
        image{
          width: 750rpx;
          height: 100%;
        }
        video{
          width: 750rpx;
          height: 100%;
        }
      }
    }
  }
  .position-block{
    position: relative;
  }
  .detail-block{
    padding: 0;
    box-sizing: border-box;
    height: calc(100vh - 228rpx);
  }
  .control-block{
    position: fixed;
    z-index: 10;
    right: 30rpx;
    bottom: 60rpx;
    color: white;
    .icon-radius{
      border-radius: 50%;
      overflow: hidden;
    }
    .flex-column-block{
      .column-item{
        @include flex(column);
        @include center;
        margin-top: 26rpx;
        .icon-box{
          width: 70rpx;
          height: 70rpx;
        }
        .icon-title{
          font-size: 24rpx;
          margin-top: 14rpx;
        }
      }
      .user-box{
        position: relative;
        .user-portrait{
          border: 4rpx solid white;
          border-radius: 50%;
        }
        .attention-btn{
          @include extend-click;
          margin-top: -18rpx;
        }
      }
    }
  }
  .material-mask-bg{
    background-size: 100% 100%;
    padding: 20rpx;
    background: linear-gradient(0.0033999999999991815deg, #1F1D21 0%, rgba(35, 35, 35, 0) 100%);
  }
  .content-block{
    color: white;
    font-size: 26rpx;
    line-height: 18px;
    margin: 26rpx 0;
    .limit-text{
      max-height: 55px;
      max-width: 600rpx;
      overflow: hidden;
    }
    .article-line{
      display: block;
      line-height: 18px;
      min-height: 18px;
    }
    .more{
      @include flex;
      @include a-center;
      image{
        margin-left: 10rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .goods-block{
    @include flex;
    @include a-center;
    height: 110rpx;
    width: 400rpx;
    .sub-item{
      // @include sub-item;
      @include flex;
      @include a-center;
      background-color: #fff;
      width: 100%;
      &.active {
        background: rgba(255,255,255,0.5);
        opacity: 0.5;
        transform: scale(0.9);
      }
      transform: scale(1);
      height: 90rpx;
      .goods-img{
        width: 60rpx;
        height: 60rpx;
        margin: 0 20rpx;
        display: block;
      }
      .right-part{
        @include sub-item;
        @include flex;
        justify-content: space-between;
        .goods-name{
          @include text-ellipsis;
        }
        .price{
          color: #000;
          font-size: 22rpx;
          margin-right: 12rpx;
          &::before{
            content: '¥';
          }

          &.market-price{
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  .material-popup-content-box{
    color: white;
    width: 750rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    line-height: 18px;
    padding: 30rpx 24rpx 20rpx 24rpx;
    position: relative;
    .material-popup-content{
      position: relative;
      max-height: 680rpx;
      .line-box{
        padding-bottom: 90rpx;
        .article-line{
          display: block;
          line-height: 18px;
          min-height: 18px;
        }
      }
    }
    .close-down{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -20rpx;
    }
  }
}